<template>
    <div class="tabs-page">
        <div class="nav">
            <div class="left" @click="change">
                <img src="../assets/images/back_b_icon.png" alt="">
            </div>
            <div class="title">{{title}}</div>
            <div class="right"></div>
        </div>
        <!-- <div class="content"> -->
            <van-tabs v-model="active" swipeable :title-active-color="'#25a1da'" @change="onchange">
                <van-tab  v-for="(item,index) in lists" :title="item.title" :key="index">
                <div class="lists">
                    <div class="item" v-for="k in TagsList" :key="k.id" @click="godeatil(k.id)">
                        <div class="img">
                            <img :src="'https://pic.ecook.cn/web/'+k.himg+'.jpg!wl280'" alt="">
                        </div>
                        <div class="txt">
                            <h4>{{k.title}}</h4>
                            <span>{{k.teacher.nickname}}</span>
                        </div>
                    </div>
                </div>
                </van-tab>
            </van-tabs>
        <!-- </div> -->
    </div>
</template>

<script>
import {getOnlineTeachTagListData} from '../api/class'
    export default {
        props:['title','navTitle'],
        data() {
            return {
                lists: [{title:'全部'}],
                active:null,
                flag:true,
                TagsList:[],
            };
        },
        methods: {
            change(){
                this.$emit('change',this.flag);
            },
            onchange(){
                // console.log(this.active);
                this.TagsList=[]
                if (this.active==0) {
                    this.getOnlineTeachTagListFun(this.title,0)
                }else{
                    this.getOnlineTeachTagListFun(this.lists[this.active].title,0)
                }
            },
            //分类数据
            getOnlineTeachTagListFun(tag,page){
                getOnlineTeachTagListData({tag,page,type:'video'}).then(data=>{
                    console.log(data);
                    if (data.list) {
                        this.TagsList = [...this.TagsList,...data.list]
                    }
                })
            },
            godeatil(id){
                this.$router.push({path:'/course',query:{id}})
            }
        },
        created() {
            this.getOnlineTeachTagListFun(this.title,0)
            if (this.navTitle!=undefined) {
                this.lists=[...this.lists,...this.navTitle]              
            }
        },
    }
</script>

<style lang="less" scoped>
.tabs-page{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1001;
    background-color: #fff;

    .nav{
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        .left{
            width: 100px;
            height: 100%;
            display: flex;
            align-items: center;
            padding-left: 10px;
            box-sizing: border-box;
            &>img{
                width: 12px;
                height: 20px;
            }
        }
        .title{
            font-weight: bold;
            letter-spacing: 0.8px;
        }
        .right{
            height: 100%;
            width: 100px;
        }
    }
     .van-tabs{

          ::v-deep .van-tab{
                padding-right: 10px;
            }
          ::v-deep .van-tabs__content{
            height: 600px;
            overflow-y:scroll ;
          }
          ::v-deep .van-tabs__line{
                width: 15px;
                bottom:20px;
                left: -3px;
                background-color: #25a1da;
                
            }
     }
     .lists{
            height: 100%;
            overflow-y: scroll;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            // align-items: center;
            padding: 20px 10px;
            box-sizing: border-box;

            .item{
                width: 165px;
                display: inline-block;
                margin: 0 5px;
                margin-bottom: 20px;
                .img{
                    width: 100%;
                    height: 123px;
                    border-radius: 8px;
                    overflow: hidden;

                    &>img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .txt {
                    margin-top: 10px;
                    &>h4{
                        font-size: 14px;
                        font-weight: bold;
                        letter-spacing: 0.8px;
                        margin-bottom: 8px;
                        line-height: 22px;
                    }
                    &>span{
                        font-size: 12px;
                        color: #999;
                        font-weight: bold;
                        letter-spacing: 0.8px;
                    }
                }

            }
     }

}
</style>